<template>
	<view class="afterBig">
		<CommenHeader :title="'申请售后'"></CommenHeader>
		<view class="warn">
			<u-icon name="server-fill" size="92" color="#ff8739" style="margin-right: 16rpx;"></u-icon>
			<view class="">当您申请售后，我们知道，我们没有做好，很抱歉耽误您用餐了 您提交的信息财务客服会在2个小时之内完成处理</view>
		</view>
		<view class="shopCarContent">
			<view class="shopTop">
				<view class="">
					<label>
						<checkbox value="all" :checked="hasAllCheck" @click="changeAllCheck" />
						<text>全选</text>
					</label>
				</view>
			</view>
			<view class="listContent">
				<view class="shopList">
					<view class="">
						<image :src="orderInfo.logo | getImg" mode=""></image>
						<view class="">
							<view class="">{{ orderInfo.storeName }}</view>
							<view class="">{{ orderInfo.storeDescription }}</view>
						</view>
					</view>
					<view class="foodList" v-for="(foodItem, foodIndex) in orderInfo.hcOrderDetailedList" :key="foodIndex">
						<checkbox value="index" :checked="foodItem.checked" ref="childCheckBox" @click="radioChange(foodIndex)" />
						<view class="">
							<image :src="foodItem.productPicture | getImg" mode=""></image>
							<view class="">
								<view class="">{{ foodItem.tradeName }}</view>
								<view class="">
									<view class="">X{{ foodItem.commodityQuantity }}</view>
								</view>
							</view>
						</view>
					</view>
					<u-input type="text" v-model="feedback" placeholder="请填写您的意见"></u-input>
				</view>
			</view>
		</view>
		<view class="writeInfo">
			<view class="tit">
				餐品问题
				<text>*</text>
			</view>
			<view class="select">
				<u-input type="text" v-model="reasonText" placeholder="请选择原因"></u-input>
				<u-icon name="arrow-right" size="36" color="#999"></u-icon>
				<view class="box" @click="showSelect"></view>
			</view>
			<view class="tit">
				上传图片
				<text>*</text>
			</view>
			<view class=""><u-upload ref="uUpload" :auto-upload="false" :max-size="100 * 1024 * 1024" max-count="6"></u-upload></view>
		</view>
		<view class="submitButton" @click="submitButton">提交</view>
		<!-- 底部地点选择 -->
		<view class="posiBottom">
			<u-popup v-model="posiShow" @touchmove.stop.prevent="" mode="bottom" :closeable="true">
				<view class="posiContent">
					<view class="title">餐品原因</view>
					<view class="listContent">
						<view class="list" v-for="(item, index) in reason" :key="index" @click="select(index)">{{ item }}</view>
					</view>
				</view>
			</u-popup>
		</view>
		<u-toast ref="uToast"></u-toast>
		<Loading :showLoading="showLoading" :text="'正在提交中，请稍等'"></Loading>
	</view>
</template>

<script>
import { addAfterSale, getAfterSalesById } from '@/utils/req/api.js';
import CommenHeader from '@/components/header/header.vue';
import Loading from '@/components/loading/loading.vue';
export default {
	components: {
		CommenHeader,
		Loading
	},
	data() {
		return {
			hasAllCheck: false,
			orderInfo: '',
			posiShow: false,
			reason: [
				// '错餐问题：退3元—5元',
				// '肉少问题：一点肉退3—5元，几乎没有退全部餐费',
				// '米饭夹生：轻微夹生退3-5元，严重夹生退全部餐费',
				// '头发问题：短头发5元，长头发退全部餐费',
				// '撒餐问题：轻微3-5元，严重撒餐退全部餐费',
				// '小型昆虫：菜虫、蚊子、包括其他小虫子，退全部餐费',
				// '中型昆虫：蟑螂、苍蝇、包括中型昆虫，退全部餐费+10元补贴',
				// '盒子破损：轻微破损退3-5元，严重破损退全部餐费',
				// '食物问题：发馊、异味，退还您的餐费+补贴x元',
				// '异物问题：钢丝球，退还您的餐费，其他异物根据提供的图片来处理',
				// '配送给的备用餐：备餐先退5元，备餐13元，根据您实际付款的餐费另外补您差价',
				// '中午没有拿到餐：配送/店里原因导致，退全部餐费+补贴5元',
				// '二次配送：让您久等了，补贴5元',
				// '其他问题：根据提供图片来处理'

				/* '错餐问题：退原价餐费',
				'肉少问题：退原价餐费',
				'米饭夹生：退原价餐费',
				'头发问题：退原价餐费',
				'撒餐问题：轻微撒餐5元，严重全退',
				'异物问题：虫子、蟑螂、钢丝球、其他异物，退原价餐费+10元补贴',
				'食物问题：发馊、异味，退原价餐费+补贴10元',
				'配送给的备餐：补贴10元',
				'中午没有拿到餐：退餐费+补贴10元',
				'二次配送：补贴5元', */
				
				'错餐问题：补贴5元',
				'肉少问题：补贴5元',
				'米饭夹生：补贴5元',
				'二次配送：补贴5元',
				'撒餐问题：补贴5元',
				'头发问题：退原价餐费',
				'配送给的备餐：补贴5元',
				'中午没有拿到餐：退餐费+补贴10元',
				'异物食物问题：虫子、蟑螂、钢丝球、其他异物，退原价餐费+10元补贴',
				'其他问题：根据图片和您的投诉，补贴一定金额',
				
			],
			reasonText: '',
			upList: [],
			feedback: '',

			upImgFlag: false,
			showLoading: false
		};
	},
	mounted() {
		let obj = JSON.parse(uni.getStorageSync('afterSaleWithOrderInfo'));
		obj.hcOrderDetailedList.forEach(foodItem => {
			foodItem.checked = false;
		});
		obj.hasClick = false;
		obj.reasonText = '';
		this.orderInfo = obj;
	},
	methods: {
		// 全选状态更改
		changeAllCheck() {
			this.hasAllCheck = !this.hasAllCheck;
		},
		radioChange(foodIndex) {
			this.orderInfo.hcOrderDetailedList[foodIndex].checked = !this.orderInfo.hcOrderDetailedList[foodIndex].checked;
		},
		showSelect() {
			this.posiShow = true;
		},
		showInput(index) {
			this.orderInfo.hcMerchants[index].hasClick = true;
		},
		select(index) {
			this.reasonText = this.reason[index];
			this.posiShow = false;
		},
		submitButton() {
			if (this.upImgFlag) {
				return;
			}

			let flag = false;
			this.orderInfo.hcOrderDetailedList.forEach(foodItem => {
				foodItem.checked && (flag = true);
			});
			if (!flag) {
				this.$showToast.call(this, '请至少选择一个商品进行售后', 'warning');
				return;
			}
			if (!this.reasonText) {
				this.$showToast.call(this, '请选择退货原因', 'warning');
				return;
			}
			if (this.$refs.uUpload.lists.length == 0) {
				this.$showToast.call(this, '请上传图片', 'warning');
				return;
			}
			this.showLoading = true;
			this.$refs.uUpload.lists.forEach(async item => {
				let upRes = await this.$uploadFile(item.url);
				let { success, message } = JSON.parse(upRes.data);
				if (success) {
					this.upList.push(message);
				}
			});
		},
		async submitInfo() {
			let hcOrderDetailedList = [];
			this.orderInfo.hcOrderDetailedList.forEach(item => {
				if (item.checked) {
					hcOrderDetailedList.push({
						id: item.id
					});
				}
			});
			let obj = {
				orderMerchantId: this.orderInfo.id,
				feedback: this.feedback,
				foodProblems: this.reasonText,
				picture: this.upList.join(','),
				hcOrderDetailedList
			};
			let result = await addAfterSale(obj);
			if (result.data.success) {
				uni.redirectTo({
					url: './submitSuccess'
				});
				this.showLoading = false;
			} else {
				this.$showToast.call(this, result.data.message, 'warning');
			}
		}
	},
	watch: {
		hasAllCheck(newVal) {
			this.orderInfo.hcOrderDetailedList.forEach((item, index) => {
				item.checked = newVal;
			});
		},
		upList(newVal) {
			if (newVal.length == this.$refs.uUpload.lists.length) {
				this.upImgFlag = true;
				this.showLoading = false;
				this.submitInfo();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.afterBig {
	min-height: 100vh;
	background: linear-gradient(0.45deg, #f5f5f5 6.52%, #ff8739 58.65%, #fb690f 98.93%);
	background-size: 100vw 466rpx;
	background-repeat: no-repeat;
	background-color: #f5f5f5;
	padding: 40rpx 20rpx;
	padding-bottom: 150rpx;

	.top {
		position: relative;

		image {
			width: 40rpx;
			height: 40rpx;
			transform: rotate(90deg);
		}

		text {
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
		}
	}

	.warn {
		background-color: #fff;
		border-radius: 20rpx;
		margin: 40rpx 0;
		padding: 36rpx 32rpx;
		@include flexs();
		font-size: 28rpx;
		line-height: 1.5;
		color: rgba(0, 0, 0, 0.5);

		image {
			width: 100rpx;
			flex-shrink: 0;
			height: 100rpx;
			margin-right: 20rpx;
		}
	}

	.shopCarContent {
		background-color: #fff;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
		border-radius: 20rpx;
		padding: 40rpx 0 48rpx 0;

		.listContent {
			// padding: 0 20rpx;
		}

		.warn {
			font-size: 28rpx;
			line-height: 2;
			border-radius: 50rpx;
			background-color: #ffedd7;
			color: #ec2f2f;
			text-align: center;
			margin: 20rpx 0;
		}

		> .shopTop {
			@include flexs(space-between, center);
			padding: 0 20rpx;
			font-size: 28rpx;
			line-height: 2;
			color: rgba(0, 0, 0, 0.55);

			label,
			view {
				@include flexs(flex-end, center);
			}

			image {
				width: 30rpx;
				height: 30rpx;
			}

			/deep/.uni-checkbox-input {
				margin-right: 16rpx;
			}
		}

		.shopList {
			> view:nth-child(1) {
				margin: 20rpx 0;
				@include flexs();
				border-bottom: 1px solid #eee;
				padding: 32rpx 0;

				image {
					width: 100rpx;
					height: 100rpx;
					margin-right: 24rpx;
					margin-left: 20rpx;
					border: 1px solid rgba(0, 0, 0, 0.1);
					border-radius: 16rpx;
				}

				> view {
					height: 100rpx;
					@include flexs(space-between, flex-start);
					flex-direction: column;
					padding: 10rpx 0;

					> view {
						&:nth-child(1) {
							font-size: 28rpx;
							font-weight: bold;
						}

						&:nth-child(2) {
							font-size: 24rpx;
							color: rgba(0, 0, 0, 0.55);
						}
					}
				}
			}

			.foodList {
				@include flexs();
				margin: 40rpx 0 32rpx 0;
				padding: 0 20rpx;

				> view {
					width: 100%;
					@include flexs();

					image {
						width: 112rpx;
						height: 112rpx;
						margin-right: 20rpx;
						margin-left: 24rpx;
						flex-shrink: 0;
						// border:1px solid rgba(0,0,0,0.1);
						border-radius: 16rpx;
					}

					> view {
						flex: 1;
						height: 100rpx;
						@include flexs(space-between, flex-start);
						flex-direction: column;

						> view {
							@include flexs(space-between, center);
							width: 100%;

							&:nth-child(1) {
								font-size: 30rpx;
								font-weight: bold;
							}

							> view {
								@include flexs();

								&:nth-child(2) {
									border-radius: 50rpx;
									border: 1px solid #eee;
								}

								&:nth-child(1) {
									font-size: 28rpx;
									font-weight: 400;
									color: rgba(0, 0, 0, 0.55);
								}

								> view {
									width: 50rpx;
									height: 50rpx;
									font-size: 36rpx;
									text-align: center;
									line-height: 50rpx;
								}

								/deep/.u-input__input {
									flex: 1;
									line-height: 50rpx;
									height: 50rpx;
									font-size: 28rpx;
									min-height: 50rpx !important;
									text-align: center;
								}
							}
						}
					}
				}
			}

			.button {
				display: inline;
				padding: 0 20rpx;
				font-size: 24rpx;
				line-height: 2;
				color: #fa690a;
				border: 1px solid #fa690a;
				border-radius: 100rpx;
				float: right;
				margin: 20rpx 0 0 0;
			}

			> /deep/.u-input {
				border-radius: 10rpx;
				margin: 0 20rpx;
				padding-left: 20rpx !important;
				background-color: #f5f5f5;
			}
		}

		.total {
			padding: 40rpx 0;
			@include flexs(space-between, center);
			border-top: 1px solid #eee;

			> view {
				&:nth-child(2) {
					color: #fa690a;
				}
			}
		}
	}

	/deep/.uni-checkbox-input {
		border-radius: 50%;
		width: 36rpx;
		height: 36rpx;
		margin-right: 0;
	}

	/deep/.uni-checkbox-input-checked {
		border-color: #fa690a !important;

		&:before {
			content: '';
			width: 30rpx;
			height: 30rpx;
			background-color: #fa690a;
			border-radius: 50%;
			display: block;
		}
	}

	.writeInfo {
		background: #fff;
		border-radius: 20rpx;
		margin: 40rpx 0;
		padding: 40rpx 20rpx;

		.tit {
			font-size: 30rpx;
			line-height: 2;

			text {
				color: #ff0000;
				margin-left: 5rpx;
			}
		}

		> .select {
			width: 100%;
			background-color: #f1f1f1;
			border-radius: 10rpx;
			margin: 20rpx 0;
			padding: 0 20rpx;
			position: relative;
			@include flexs(space-between, center);

			image {
				width: 30rpx;
				height: 30rpx;
			}

			.box {
				position: absolute;
				width: 100%;
				left: 0;
				height: 100%;
				top: 0;
			}
		}

		/deep/.u-list-item:nth-child(1) {
			margin-left: 0;
		}
	}

	.submitButton {
		width: 100%;
		background-color: #fa690a;
		color: #fff;
		text-align: center;
		border-radius: 50rpx;
		line-height: 2;
		padding: 15rpx 0;
	}

	.posiBottom {
		/deep/.u-drawer-bottom {
			width: 100% !important;
			padding: 30rpx 20rpx 40rpx 20rpx;
			border-top-left-radius: 40rpx;
			border-top-right-radius: 40rpx;
		}
	}

	.posiContent {
		> view {
			&:nth-child(1) {
				font-size: 32rpx;
				font-weight: bold;
				text-align: center;
			}
		}

		> .listContent {
			margin-top: 10rpx;

			.list {
				border-bottom: 1px solid #eee;
				font-size: 30rpx;
				line-height: 2;
				padding: 10rpx 0;
				color: #333;
				&:last-child {
					border-bottom: 0;
				}
			}
		}
	}
}
</style>

<style lang="scss">
.afterBig {
	.posiBottom {
		/deep/ {
			.u-drawer__scroll-view {
				max-height: 75vh;
			}
		}
	}
}
</style>
